<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '设置',
  },
}
</route>

<template>
  <view>
    <!-- 主题颜色切换 -->
    <base-title text="系统主题" wrapClass="!w-638rpx pb-20rpx pt-56rpx" />
    <view class="w-638rpx m-a">
      <wd-radio-group v-model="themeConfig.theme" inline shape="dot">
        <view class="flex-sb-center w-500rpx">
          <wd-radio value="light">浅色模式</wd-radio>
          <wd-radio value="dark">深色模式</wd-radio>
        </view>
      </wd-radio-group>
    </view>

    <base-title text="用户协议和隐私政策" wrapClass="!w-638rpx pb-20rpx pt-32rpx" />
    <view class="w-638rpx m-a">
      <!-- 功能导航 -->
      <view class="pb-32rpx">
        <base-cell 
          v-for="(item, index) in enumParams.agreementList" 
          :key="index" 
          :data="item" 
          :leftIcon="item.icon"
          @handleClick="(data) => toPath(data)"
        />
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="btn-full w-center pt-28rpx">
      <wd-button 
        class="btn-w-full btn-h-78"
        :loading="loading"
        @click="logoutSystem"
      >退出登录</wd-button>
    </view>
  </view>
</template>
  
<script lang="ts" setup>
import BaseTitle from "@/components/base/base-title.vue";
import BaseCell from "@/components/base/base-cell.vue";
import { enumParams } from "@/enum/index";
import { useThemeStore, useUserStore } from "@/store";
import { LogoutSystem } from "@/service/db_index";

// 主题颜色
const { themeConfig } = useThemeStore();
const userStore = useUserStore();

const loading = ref(false);
const logoutSystem = async () => {
  try {
    loading.value = true;
    await LogoutSystem();
    userStore.clearUserInfo();
    userStore.handleTUILogout();
    setTimeout(() => {
      loading.value = false;
      uni.navigateBack();
    }, 1000)
  } catch (error) {
    loading.value = false;
    console.log(error)
  }
}

const toPath = (item) => {
  uni.navigateTo({ url: item.path })
}

onShow(() => {
  nextTick(() => {
    // 设置页面标题
    themeConfig.title = '设置';
  })
})
</script>

<style lang="scss">
:root,
page {
  background-color: #fff !important;
}
</style>
